<template>
    <div class="foot">
      <div class="logo">
        <div>
          <img src="../assets/微博.png" alt="" />
          <img src="../assets/微信.png" alt="" />
          <img src="../assets/抖音.png" alt="" />
          <img src="../assets/ff.png" alt="" />
          <img src="../assets/油管.png" alt="" />
        </div>
        <img src="../assets/底部logo.png" alt="" style="position: absolute; right: 350px;"/>
      </div>
      <div class="list">
        <!-- 第一次循环，遍历到第一层子数组 -->
        <div class="list-items" v-for="item in lists" :key="item.id">
          <h4 style="font-weight: 600; color: #3D3D3D; margin-bottom: 10px;">{{ item.name }}</h4>
  
          <!-- 第二次循环，遍历到第一层子数组的text子数组 -->
          <div v-for="item2 in item.text" :key="item2.id">
            <h4 style="font-weight: 400; margin-bottom: 8px">
              <a href="" style="color: #3d3d3d; text-decoration: none;">{{ item2.name }}</a>
            </h4>
  
            <!-- 第三次循环，遍历到第二层子数组的text子数组 -->
            <div v-for="item3 in item2.text" :key="item3.id">
              <h5 style="font-weight: 100; margin-bottom: 8px;">
                <a href="" style="color: #7a7979; text-decoration: none;">{{ item3.name }}</a>
              </h5>
            </div>
            
          </div>
        </div>
      </div>
      <div class="warn">
        <p>
          Copyright © 2023 www.Harsine.com.All Rights Reserved. 依蓝公司 版权所有
        </p>
        <p style="display: flex; justify-content: center; align-items: center;">
          <img src="../assets/公安部logo.png" alt="" />
          公安部联网备案号：37021302000338&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鲁ICP备10012159号-7
        </p>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        //这是一个多维数组
        lists: [
          {
            id: 0,
            name: "产品",
            text: [
              {
                id: 0,
                name: "HarSine通用版",
              },
              {
                id: 1,
                name: "HarSine定制版",
              },
              {
                id: 2,
                name: "HarSine独立版",
              },
              {
                id: 3,
                name: "HarSine接口版",
              },
            ],
          },
          {
            id: 1,
            name: "关于",
            text: [
              {
                id: 0,
                name: "服务协议",
              },
              {
                id: 1,
                name: "隐私政策",
              },
            ],
          },
          {
            id: 2,
            name: "购买",
            text: [
              {
                id: 0,
                name: "场景应用",
                text: [
                  {
                    id: 0,
                    name: "定制版",
                  },
                  {
                    id: 1,
                    name: "独立版",
                  },
                  {
                    id: 2,
                    name: "接口版",
                  },
                ],
              },
              {
                id: 1,
                name: "订阅及部署服务",
                text: [
                  {
                    id: 0,
                    name: "订阅定制版",
                  },
                  {
                    id: 1,
                    name: "订阅独立版",
                  },
                  {
                    id: 2,
                    name: "订阅接口版",
                  },
                ],
              },
            ],
          },
          {
            id: 3,
            name: "公司",
            text: [
              {
                id: 0,
                name: "关于红信",
              },
              {
                id: 1,
                name: "线下体验",
              },
              {
                id: 2,
                name: "联系我们",
              },
            ],
          },
        ],
      };
    },
  };
  </script>
  
  <style scoped>
  .foot {
    width: 100%;
    background-color: #f7f8f9;
    color: black;
  }
  .foot {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  
  .logo {
    width: 100%;
    height: 60px;
  }
  .logo {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }
  .logo div {
    position: absolute;
    left: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .logo div img {
    margin-right: 70px;
  }
  
  .list {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .list-items {
    margin: 15px;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
  }
  .list div:first-child {
    margin-left: 350px;
  }
  
  .warn {
    width: 100%;
    color: #CFCFCF;
    font-size: 12px;
  }
  </style>